<template>
	<view class="tmpl">
		<!-- <sl-filter :ref="'slFilter'" :menuList="menuList" @result="result"></sl-filter> -->

		<view class="table-container" style="margin-top: 20px;">
			<view class="table" cellspacing="0" cellpadding="0">
				<view class="tr">
					<view class="th">班组</view>
					<view class="th">姓名</view>
					<!-- <view class="th">注册人数</view>
					<view class="th">学习人数</view>
					<view class="th">学习率 %</view>
					<view class="th">通过人数</view>
					<view class="th">通过率 %</view>-->
				</view>
				<view class="tr" v-for="item in study_statistics_list">
					<view class="td">{{item.dwmc}}</view>
					<view class="td">{{item.userName}}</view>
					<!-- <view class="td">{{item.zcrs ? item.zcrs : 0}}</view>
					<view class="td blue-text">{{item.xxrs ? item.xxrs : 0}}</view>
					<view class="td">{{item.xxl * 100}}%</view>
					<view class="td">{{item.tgrs ? item.tgrs : 0}}</view>
					<view class="td">{{item.tgl * 100}}%</view> -->
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import request from '../../static/common/request.js';
	import slFilter from '@/components/songlazy-sl-filter/sl-filter/sl-filter.vue';

	export default {
		components: {
			slFilter
		},
		data() {
			return {
				menuList: [{
						'title': '日期',
						'key': 'key_1',
						'detailList': [{
							title: '全部',
							value: ''
						}]
					},
					{
						'title': '学识统计',
						'key': 'key_2',
						'detailList': [],
						'url': './study_statistics'
					}
				],
				member_count: 0,
				study_statistics_list: [],
			};
		},
		onShow: function() {
			let _this = this;
			this.$api.tj({}).then(res => {
				console.log("tj", res)
				let data = [];
				res.data.forEach(function(item, i) {
					item['xxl'] = item.zcrs ? (item.xxrs ? Number(item.xxrs) : 0 / Number(item.zcrs)).toFixed(2) : 0
					item['tgl'] = item.zcrs ? (item.tgrs ? Number(item.tgrs) : 0 / Number(item.zcrs)).toFixed(2) : 0
				})
				_this.study_statistics_list = res.data;
			})
			// 日期列表
			// _this.menuList[0].detailList = []
			// _this.menuList[0].detailList.push({
			// 	title: '全部',
			// 	value: ''
			// });
			// for (let i = 0; i <= 7; i++) {
			// 	let date = _this.$_if.GetOfferDate(-i);
			// 	let dept_name = date; // 名称
			// 	let dept_id = date; //  ID
			// 	let data = {
			// 		title: dept_name,
			// 		value: dept_id
			// 	};
			// 	_this.menuList[0].detailList.push(data);
			// }
		},
		methods: {

		}
	};
</script>

<style lang="scss">
	.blue-text {
		color: #5ba8d7 !important;
	}

	page {
		background-color: #fff;
	}

	.table-container {
		margin: 20rpx;
		padding: 0;
		border: solid 1px #e7e7e8;
		border-radius: 8rpx;
		box-shadow: 0 0 2rpx rgba(0, 0, 0, .1);

		.table {
			border-collapse: collapse;

			.tr {
				width: 100%;
				border-top: solid 1px #dadada;
				display: flex;
				justify-content: space-between;

				&:first-child {
					border: none;
				}
			}

			.tr .th,
			.tr .td {
				padding: 0;
				margin: 0;
				text-align: center;
			}

			.tr .th {
				background-color: #eff2f7;
				color: #444644;
				font-size: $uni-font-size-base;
				font-weight: normal;
				padding: 10rpx;
				width: 100%;

				&:first-child {
					text-align: left;
					padding-left: 20rpx;
					width: calc(100% - 180px);
				}
			}

			.tr .td {
				padding: 20rpx;
				font-weight: bold;
				color: #454545;
				width: 100%;

				&:first-child {
					text-align: left;
					padding-left: 20rpx;
					@extend .blue-text;
					width: calc(100% - 180px);
				}
			}
		}
	}
</style>
